const path = require('path')

const { default: AutoImport } = require('unplugin-auto-import/webpack')

function resolve(dir) {
  return path.join(__dirname, '/', dir)
}
module.exports = {
  publicPath: '/',
  configureWebpack: {
    plugins: [
      // 配置模块自动导入，无需显示引入直接使用
      AutoImport({
        imports: [
          'vue',
          'vue-router',
          {
            'vuex': ['useStore'] // 示例：自动导入 Vuex 4 的 useStore
          }
        ],
        dts: path.resolve(__dirname, 'src/types/auto-imports.d.ts'), // 类型声明文件路径
        eslintrc: {
          enabled: true, // 生成 ESLint 配置
          filepath: path.resolve(__dirname, '.eslintrc-auto-import.json')
        }
      })
    ],
    resolve: {
      alias: {
        'unplugin-auto-import/webpack': require.resolve('unplugin-auto-import/webpack')
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/components/svg/icons'))
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/components/svg/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

      // // 修复 TS 文件解析
      config.resolve.symlinks(false)
      config.module
        .rule('ts')
        .use('ts-loader')
        .tap(options => ({
          ...options,
          transpileOnly: true,
          appendTsSuffixTo: [/\.vue$/]
        }))
  },
  devServer: {
    port: 5000
  },
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // 强制使用 Dart Sass
      },
    },
  },
}
